<template>
  <view class="stock-page">
    <view class="top-container">
      <view class="top-body-container">
        <view>
          <span>盘点单号</span>
          <span>ZCP1231231231</span>
        </view>
        <span>盘点单名称</span>
        <u-line/>
        <span>盘点人</span>
        <span>开启盘盈 否</span>
        <span>要求完成时间</span>
        <span>备注</span>
      </view>
    </view>
    <view class="body-container">
      <z-paging ref="paging" :fixed="false">
        <template #top>
          <up-tabs :list="tableList"
                   lineColor="#2979ff"
                   itemStyle="background:#fff;height: 80rpx;width: 100%;border-bottom: 1rpx solid #f5f5f5;"
          />
        </template>
        <consumables-item />
      </z-paging>
      <view class="footer-btn">
        <up-button plain>返回</up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
import ConsumablesItem from "@/components/assetStocktaking/consumablesItem";

const tableList = ref([
  {
    name: '全部'
  },
  {
    name: '已盘',
    badge: {
      value: 5
    }
  },
  {
    name: '未盘'
  },
  {
    name: '盘盈'
  },
  {
    name: '盘亏'
  }
])

</script>

<style scoped lang="scss">

.stock-page {
  width: 100%;
  height: calc(100vh - var(--window-top));

  :deep(.zp-view-super) {
    padding-bottom: 130rpx !important;
  }

  .footer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #4792FD;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    height: 130rpx;

    > :deep(.u-button.u-reset-button.u-button--info.u-button--square.u-button--normal.u-button--plain) {
      background-color: #4792FD;
      border: none;
      color: white;
      height: 100%;
    }
  }

  .top-container {
    height: 440rpx;
    width: 100%;
    background-color: #4792FD;
    display: flex;
    justify-content: center;
    align-items: center;

    .top-body-container {
      height: 380rpx;
      width: calc(100% - 40rpx);
      background-color: #5c99fa;
      border-radius: 10rpx;
      padding: 20rpx;

      & > span {
        display: block;
        margin: 20rpx 0;
        color: #A9DAF1;
        font-size: 0.8rem;
      }

      & > view:first-child {
        display: flex;
        align-items: center;
        line-height: 50rpx;

        & > span:first-child {
          height: 50rpx;
          background-color: white;
          border-radius: 5rpx;
          padding: 5rpx 10rpx;
          font-size: .9rem;
          color: #6494CE;
          letter-spacing: .1rem;
        }

        & > span:last-child {
          margin-left: 20rpx;
          font-size: .8rem;
          color: white;
        }
      }
    }
  }

  .body-container {
    height: calc(100% - 460rpx);
    width: 100%;
  }
}
</style>